<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="tit">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-input
        placeholder="请输入内容"
        class="input-with-select inp"
        v-model="usersPay.query"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getUsersByName"
        ></el-button>
      </el-input>
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加用户</el-button
      >

      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <el-form :model="addUsers" :rules="dataRules">
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            prop="username"
          >
            <el-input v-model="addUsers.username"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            :label-width="formLabelWidth"
            prop="password"
          >
            <el-input v-model="addUsers.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="addUsers.email"></el-input>
          </el-form-item>
          <el-form-item
            label="手机"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input v-model="addUsers.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onAddUsers">确 定</el-button>
        </div>
      </el-dialog>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="#" type="index" width="47"> </el-table-column>
        <el-table-column prop="username" label="姓名" width="166">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="166">
        </el-table-column>
        <el-table-column prop="mobile" label="电话" width="166">
        </el-table-column>
        <el-table-column prop="role_name" label="角色" width="166">
        </el-table-column>
        <el-table-column label="状态" width="166">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.mg_state"
              @change="onUserState(row.id, row.mg_state)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="onUpdateForm(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="onDelForm(row.id)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="mini"
              @click="onUserRole(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改用户" :visible.sync="updateFormVisible">
        <el-form :rules="dataRules">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input
              :disabled="true"
              v-model="usersDataById.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="usersDataById.email"></el-input>
          </el-form-item>
          <el-form-item
            label="手机"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input v-model="usersDataById.mobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              submitUpdateForm(
                usersDataById.id,
                usersDataById.email,
                usersDataById.mobile
              )
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-dialog title="分配角色" :visible.sync="UserRoleState">
        <span>当前的用户：{{ usersDataById.username }}</span
        ><br />
        <span>当前的角色：超级管理员</span>
        <el-form>
          <el-form-item label="分配新角色：" :label-width="formLabelWidth">
            <el-select v-model="RolesDataValue" placeholder="请选择">
              <el-option
                v-for="item in RolesData"
                :key="item.id"
                :label="item.roleName"
                :value="item.roleName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="UserRoleState = false">取 消</el-button>
          <el-button type="primary" @click="submitUserRole()">确 定</el-button>
        </div>
      </el-dialog>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.$store.getters.usersData.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "userinfo",
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      usersPay: {
        pagenum: 1, //当前页码
        pagesize: 2, //每页显示条数
        query: null,
      },
      addUsers: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      UserRoleState: false,
      usersDataById: [],
      currentPage: 0,
      dialogFormVisible: false,
      formLabelWidth: "100px",
      updateFormVisible: false,
      dataRules: {
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          { min: 2, max: 6, message: "用户名长度为2-6", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码必填", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度为3-10个字符",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "密码必填", trigger: "blur" },
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: "手机号格式错误",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      RolesData: {},
      RolesDataById: {},
      RolesDataValue: "",
    };
  },
  computed: {},
  watch: {
    async tableData(newVal) {
      console.log(newVal);
      if (newVal.length === 0) {
        this.handleCurrentChange(this.usersPay.pagenum - 1);
        await this["users/getUsers"](this.usersPay);
      }
    },
  },
  async created() {
    await this["users/getUsers"](this.usersPay);
    this.tableData = this.$store.getters.usersData.users;
    await this["roles/getRoles"]();
    this.RolesData = this.$store.getters.RolesData;
    // console.log(this.RolesData);
  },
  mounted() {},
  methods: {
    ...mapActions([
      "users/getUsers",
      "users/addUsers",
      "users/updateUsersState",
      "users/getUsersById",
      "users/updateUserInfo",
      "users/deleteUserInfo",
      "users/updateUserRole",
      "roles/getRoles",
      "roles/getRolesById",
    ]),
    async getUsersByName() {
      await this["users/getUsers"](this.usersPay);
      this.tableData = this.$store.getters.usersData.users;
      this.currentPage = this.$store.getters.usersData.total;
    },
    handleSizeChange(val) {
      this.usersPay.pagesize = val;
      this.getUsersByName();
    },
    handleCurrentChange(val) {
      this.usersPay.pagenum = val;
      this.getUsersByName();
    },
    async onAddUsers() {
      await this["users/addUsers"](this.addUsers);
      this.dialogFormVisible = false;
    },
    onUserState(uId, type) {
      // console.log(typeof uId);
      this["users/updateUsersState"]({ uId, type });
      // console.log(uId, type);
    },
    async onUpdateForm(id) {
      this.updateFormVisible = true;
      // console.log(id);
      await this["users/getUsersById"](id);
      this.usersDataById = this.$store.getters.usersDataById;
      // console.log(this.usersDataById);
    },
    submitUpdateForm(id, email, mobile) {
      this.updateFormVisible = false;
      // console.log(id);
      this["users/updateUserInfo"]({ id, email, mobile });
      this.getUsersByName();
    },
    onDelForm(id) {
      {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            // console.log(id);
            await this["users/deleteUserInfo"](id),
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            // console.log(this.usersPay);
            this.getUsersByName();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    async onUserRole(id) {
      this.UserRoleState = true;
      await this["users/getUsersById"](id);
      this.usersDataById = this.$store.getters.usersDataById;
      console.log(this.usersDataById);
      // await this["roles/getRolesById"](id);
      // this.RolesDataById = this.$store.getters.RolesDataById;
      // console.log(this.RolesDataById);
    },
    submitUserRole() {
      this.UserRoleState = false;
      this["users/updateUserRole"]({
        id: this.usersDataById.id,
        rid: this.usersDataById.rid,
      });
    },
  },
};
</script>

<style scoped>
.tit {
  font-size: 14px;
}
.inp {
  width: 368px;
  padding: 0px 30px 0px 15px;
}
</style>
